import React from "react";
import LearnLife2 from "./learn-life2";
import ErrorBoundDary from "./error-boundary";

export default class LearnLife extends React.Component {
  /**
   *
   * @param {*} props
   * 继承自React.Component,父组件传过来的参数
   * @param {*} context
   * 全局上下文
   * @param {*} updater
   * 包含一些更新方法的对象
   * 比如this.setState 那么其实最终调用的就是
   * this.updater.enqueueSetState
   */
  constructor(props, context, updater) {
    super(props);
  }

  state = {
    num: 1,
    isLoad: true,
  };

  render() {
    return (
      <ErrorBoundDary>
        <div>
          <div>生命周期 -- {this.state.num}</div>
          <button
            onClick={() =>
              this.setState({
                isLoad: !this.state.isLoad,
              })
            }
          >
            {this.state.isLoad ? "卸载" : "创建"}
          </button>
          {this.state.isLoad && <LearnLife2 name="张三"></LearnLife2>}
          <button
            onClick={() =>
              this.setState({
                num: this.state.num + 1,
              })
            }
          >
            父组件+1
          </button>
        </div>
      </ErrorBoundDary>
    );
  }
}
